<template>
  <div class="honor-container">
    <el-steps
      :space="200"
      :active="activeIndex - 0"
      finish-status="success"
      align-center
      class="steps"
    >
      <el-step title="基本信息"></el-step>
      <el-step title="荣誉图片"></el-step>
      <el-step title="荣誉附件"></el-step>
      <el-step title="荣誉内容"></el-step>
    </el-steps>
    <!-- :inline="true" label-width="80px" -->
    <el-form :model="honorModel" :rules="honorFormRules" ref="honorFormRef">
      <el-tabs v-model="activeIndex" tab-position="left" :before-leave="beforeTabLeave">
        <el-tab-pane label="基本信息" name="0">
          <honor-info :form="honorModel" :rules="honorFormRules"></honor-info>
        </el-tab-pane>
        <el-tab-pane label="荣誉图片" name="1">
          <honor-picture
            :model="honorModel"
            :rules="honorFormRules"
            ref="honorPicture"
            @pictureChange="pictureChange"
          ></honor-picture>
        </el-tab-pane>
        <el-tab-pane label="荣誉附件" name="2">
          <honor-attachment
            :model="honorModel"
            :rules="honorFormRules"
            ref="honorAttachment"
            @attachmentChange="attachmentChange"
          ></honor-attachment>
        </el-tab-pane>
        <el-tab-pane label="荣誉内容" name="3">
          <honor-description :model="honorModel" :rules="honorFormRules"></honor-description>
        </el-tab-pane>
      </el-tabs>

      <el-form-item class="save-btn">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addHonor, updateHonor } from "@/api/archive-honor/honor";
import HonorInfo from './components/honor-info'
import HonorDescription from './components/honor-desc'
import HonorPicture from './components/honor-picture.vue'
import HonorAttachment from './components/honor-attachment.vue'
export default {
  name: 'HonorAdd',
  components: {
    HonorInfo,
    HonorDescription,
    HonorPicture,
    HonorAttachment
  },
  data () {
    return {
      activeIndex: '0',
      honorModel: {
        honorId: 0,
        honorName: null,
        alternativeName: null,
        honorCode: null,
        lookup: null,
        category: null,
        level: null,
        label: null,
        winner: null,
        department: null,
        awardedAt: null,
        awardedBy: null,
        description: null,
        coverId: null,
        tags: null,
        attachments: null,
        status: 0,
        deleted: 0,
        displayOrder: null,
        createdBy: null,
        createdAt: null,
        updatedBy: null,
        updatedAt: null,
        attachments: '[]',
        pictures: '[]',

        pictureList: [],
        specificationList: [],
        attributeList: []

      },
      honorFormRules: {
        honorName: [
          { required: true, message: '请输入荣誉名称', trigger: 'blur' },
          { min: 2, max: 255, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async beforeTabLeave (activeName, oldActiveName) {
      console.log('activeName, oldActiveName', activeName, oldActiveName)
      if (oldActiveName === '0' && this.honorModel.honorId == 0) {
        const { data: honor } = await addHonor(this.toHonor())
        this.honorModel = honor;
      }
    },
    pictureChange (pictures) {
      console.log('pictureChange', pictures)
      this.honorModel.pictures = pictures
    },
    attachmentChange (attachments) {
      this.honorModel.attachments = attachments
    },
    toHonor () {
      let honor = {
        "honorId": this.honorModel.honorId,
        "honorName": this.honorModel.honorName,
        "alternativeName": this.honorModel.alternativeName,
        "honorCode": this.honorModel.honorCode,
        "lookup": this.honorModel.lookup,
        "category": 1,
        "level": 4,
        "label": this.honorModel.label,
        "winner": this.honorModel.winner,
        "department": this.honorModel.department,
        "awardedAt": this.honorModel.awardedAt,
        "awardedBy": this.honorModel.awardedBy,
        "description": this.honorModel.description,
        "coverId": 1,
        "tags": this.honorModel.tags,
        "attachments": this.honorModel.attachments,
        "pictures": this.honorModel.pictures,
        "status": 0,
        "deleted": 0,
        "displayOrder": this.honorModel.displayOrder,
      };
      return honor;
    },
    handleEdit () {
      return;
    },
    onSubmit () {
      // console.log('mounted') honorFormRef
      this.$refs["honorFormRef"].validate(valid => {
        if (!valid) {
          return
        }
        console.log('this.honorForm=', this.honorModel)
        if (this.honorModel.honorId != 0) {
          updateHonor(this.honorModel).then(response => {
            this.$message.success("修改成功");
            // this.open = false;
            // this.getList();
            this.$router.push('/honor/honor')
          });
        } else {
          addHonor(this.honorModel).then(response => {
            this.$message.success("新增成功");
            // this.open = false;
            // this.getList();
            this.$router.push('/honor/honor')
          });
        }
      });
    },
    onCancel () {
      this.$router.push('/honor/honor')
    }
  },
  mounted () {
    // console.log('mounted')
  },
  created () {
    // console.log('created')
  }

}
</script>

<style scoped>
.steps {
  margin-top: 20px;
  margin-bottom: 20px;
}
.save-btn {
  margin: 20px 105px;
}
</style>